<template>
    <vxe-table
      border
      header-align="center"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="props.paymentNodeList"
      size="mini"
      align="center"
    >
      <vxe-column title="付款节点" field="paymentNode">
        <template v-slot:default="{ row }">
          {{paymentNodeMap[row.paymentNode]}}
        </template>
      </vxe-column>
      <vxe-column title="合同付款比例" field="paymentRatio" />
      <vxe-column title="已付款比例" field="paidRatio" />
      <vxe-column title="本次付款比例" field="thisPaidRatio">
        <template v-slot:default="{ row }">
          <el-input
            :disabled="disabled"
            @input="(v)=>row.thisPaidRatio=v.replace(/^(0+)|[^\d.]+/g,'')"
            v-model="row.thisPaidRatio"
            @change="(val)=>handleChange(row,val)"
          >
            <template #append>%</template>
          </el-input>
        </template>
      </vxe-column>
    </vxe-table>
</template>

<script setup lang="ts">
import {defineEmits, defineProps} from "vue";
import {ElMessage} from "element-plus";

// 付款节点枚举
const paymentNodeMap = {
  0:'预付款',
  1:'排产款',
  2:'提货款',
  3:'到货款',
  4:'尾款'
}
const props = defineProps({
  paymentNodeList:{
    type:Array,
    default:()=>[]
  },
  disabled:{
    type:Boolean,
    default:()=>false
  }
})
const $emit = defineEmits(['update:paymentNodeList'])
const handleChange = (item,val) => {
  if(!val) item.thisPaidRatio = 0
  const paymentRatio = item.paymentRatio.split('%')[0]
  const paidRatio = item.paidRatio.split('%')[0]
  if((parseFloat(val)+parseFloat(paidRatio))>parseFloat(paymentRatio)){
    ElMessage.error('本次付款比例+已付款比例需小于等于合同付款比例')
    item.thisPaidRatio = 0
  }
  $emit('update:paymentNodeList',props.paymentNodeList)
}
</script>

<style lang="scss" scoped>

</style>
